<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script th:src="@{/jquery/jquery-3.5.1.js}"></script>
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.css}">
    <style th:inline="text">
        #space {
            height: 70px;
        }
        #form1{
            background: rgba(255,255,255,0.5);
        }
    </style>
</head>
<body>
<div th:insert="~{common/header::header1}"></div>
<div class="container">
    <form id="form1" th:action="@{/user-info/add}" onsubmit="return checkForm(this)">
        <div id="space"></div>
        <div class="form-group row justify-content-sm-center">
            <label for="loginName" class="col-sm-2 col-form-label font-weight-bolder">登录名</label>
            <div class="col-sm-5">
                <input type="text"  class="form-control" id="loginName" name="loginName" onblur="checkLoginName(this)">
            </div>
            <div class="col-sm-3">
                <span id="loginNameErr"></span>
            </div>
        </div>
        <div class="form-group row justify-content-sm-center">
            <label for="userName" class="col-sm-2 col-form-label font-weight-bolder">姓名</label>
            <div class="col-sm-5">
                <input type="text"  class="form-control" id="userName" name="userName" onblur="checkUserName()">
            </div>
            <div class="col-sm-2">
                <span id="userNameErr"></span>
            </div>
        </div>
        <div class="form-group row justify-content-sm-center">
            <label for="inputPassword" class="col-sm-2 col-form-label font-weight-bold">密码</label>
            <div class="col-sm-5">
                <input type="password" class="form-control" id="inputPassword" name="password" onblur="checkPassword()">
            </div>
            <div class="col-sm-2">
                <span id="pwdErr"></span>
            </div>
        </div>
        <div class="form-group row justify-content-sm-center">
            <label for="confirmPassword" class="col-sm-2 col-form-label font-weight-bolder">确认密码</label>
            <div class="col-sm-5">
                <input type="password" class="form-control" id="confirmPassword" name="confirmPassword" onblur="ConfirmPassword()">
            </div>
            <div class="col-sm-2">
                <span id="pwdErr2"></span>
            </div>
        </div>
        <div class="form-group row justify-content-sm-center">
            <label class="col-sm-2 col-form-label font-weight-bolder">性别</label>
            <div id="sex" class="col-sm-5">
                <label for="boy">男:</label>
                <input id="boy" name="sex" value="1" type="radio" checked="checked">
                <label for="girl">女:</label>
                <input id="girl" name="sex" value="0" type="radio" checked="checked">
            </div>
        </div>
        <div class="form-group row justify-content-sm-center">
            <label for="phone" class="col-sm-2 col-form-label font-weight-bolder">联系电话</label>
            <div class="col-sm-5">
                <input type="text" class="form-control" id="phone" name="phone" onblur="checkPhone()">
            </div>
            <div class="col-sm-2">
                <span id="phoneErr"></span>
            </div>
        </div>
        <div class="form-group row justify-content-sm-center">
            <label for="email" class="col-sm-2 col-form-label font-weight-bold">电子邮箱</label>
            <div class="col-sm-5">
                <input type="email" class="form-control" id="email" aria-describedby="emailHelp" name="email" onblur="checkEmail()">
                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
            </div>
            <div class="col-sm-2">
                <span id="emailErr"></span>
            </div>
        </div>
        <div class="form-group row justify-content-sm-center">
            <div class="col-sm-1">
                <button type="submit" class="btn btn-sm btn-primary">注册</button>
            </div>
            <div class="col-sm-2"></div>
            <div class="col-sm-1">
                <a th:href="@{/charts}"><button type="button"  class=" btn btn-sm btn-danger">返回</button></a>
            </div>
        </div>
    </form>
</div>
</body>
<script th:src="@{/jquery/jquery-3.5.1.js}"></script>
<script th:inline="javascript">
    let u = [[${#request.getContextPath()}]];
    function validateLoginName(obj) {
        $.ajax({
            type: "POST",
            url: u+"/user-info/validateLoginName",
            data: "loginName=" + $(obj).val(),
            success: function (msg) {
                if (msg !=="") {
                    $("#loginNameErr").html(msg);
                    obj.val("");
                    return false;
                } else {
                    $("#loginNameErr").html("");
                    return true;
                }
            },
            error: function () {
                alert("出现异常");
            }
        });
    }
    // 验证登录名
    function checkLoginName(obj) {
        let loginName = $("#loginName");
        let errname = $("#loginNameErr");
        let pattern = /^\w{5,}$/;
        if (loginName.val().length === 0) {
            errname.html("登录名不能为空");
            return false;
        }
        if (!pattern.test(loginName.val())) {
            errname.html("登录名称至少五位");
            return false;
        }
        if (validateLoginName(obj)){

        }
        else {
            errname.html("");
            return true;
        }

    }
    function checkUserName() {
        let userName = $("#userName");
        let errName = $("#userNameErr");
        let pattern = /^\w{2,6}$/;
        if (userName.val().length === 0) {
            errName.html("姓名不能为空");
            return false;
        }
        if (!pattern.test(userName.val())) {
            errName.html("姓名应当为2-6个字");
            return false;
        } else {
            errName.html("");
            return true;
        }
    }
    //验证密码
    function checkPassword(){
        var userpasswd = $("#inputPassword");
        var errPasswd = $("#pwdErr");
        var pattern = /^\w{4,16}$/; //密码要在4-16位
        if (userpasswd.val().length === 0) {
            errPasswd.html("密码不能为空");
            return false;
        }
        if(!pattern.test(userpasswd.val())){
            errPasswd.html("密码要在4-16位");
            return false;
        }
        else{
            errPasswd.html("");
            return true;
        }
    }
    //确认密码
    function ConfirmPassword(){
        var userpasswd = $("#inputPassword");
        var userConPassword = $("#confirmPassword");
        var errPasswd = $("#pwdErr");
        var errConPasswd = $("#pwdErr2");
        if (userConPassword.val().length === 0&& userpasswd.val().length===0) {
            errPasswd.html("密码不能为空");
            return false;
        }
        if((userpasswd.val())!=(userConPassword.val())){
            errConPasswd.html("上下密码不一致");
            return false;
        }
        else{
            errConPasswd.html("");
            return true;
        }
    }
    //验证手机号
    function checkPhone(){
        var userphone = $("#phone");
        var phoneErr = $("#phoneErr");
        var pattern = /^1[34578]\d{9}$/; //验证手机号正则表达式
        if (userphone.val().length === 0) {
            phoneErr.html("手机号码不能为空");
            return false;
        }
        if(!pattern.test(userphone.val())){
            phoneErr.html("手机号码不合规范");
            return false;
        }
        else{
            phoneErr.html("");
            return true;
        }
    }
    //验证邮箱
    function  checkEmail() {
        var useremail = $("#email");
        var emailErr = $("#emailErr");
        var pattern =/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;//邮箱验证正则表达式
        if (useremail.val().length === 0) {
            emailErr.html("邮箱不能为空");
            return false;
        }
        if(!pattern.test(useremail.val()))
        {
            emailErr.html("邮箱不符合规范");
            return false;
        }
        else{
            emailErr.html("");
            return true;
        }
    }
    function checkForm(obj) {
        let loginName = checkLoginName(obj);
        let name = checkUserName();
        let password = checkPassword();
        let confirmPwd = ConfirmPassword();
        let email = checkEmail();
        let phone = checkPhone();
        let result = loginName && name && password && confirmPwd && email && phone;
        return result;
        alert(result);
    }
</script>
</html>